{% load i18n %}
{% load static %}
<!DOCTYPE HTML>
<html>
<head>
    <title> 首页代码结构</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="{% static 'assets/css/page-min.css' %} "
          rel="stylesheet">
    <link href="{% static 'assets/css/dpl-min.css' %} "
          rel="stylesheet">
    <style type="text/css">
        code {
            padding: 0px 4px;
            color: #d14;
            background-color: #f7f7f9;
            border: 1px solid #e1e1e8;
        }

        .num {
            margin-top: 10px;
        }

        .num li {
            float: left;
            height: 89px;
            width: 15%;
            margin-right: 8%;
        }

        .num li:first-child {
            margin-left: 8%;
        }

        .workHistory tbody tr:nth-child(2n+1) {
            background: #F4F4F4;
        }

        .myTeam tbody tr:nth-child(2n+1) {
            background: #F4F4F4;
        }

        .annocement ul li:nth-child(2n+1) {
            background: #F4F4F4;
        }
    </style>
</head>
<body style="background:#E8E9EE ;">
<div class="container">
    <div style="padding: 10px 0;">首页>我的桌面</div>
    <div class="row">
        <div class="span4" style="height: 109px;width: 100%;background: #fff;border-radius: 10px;">
            <ul class="num">
                <li style="background:#F4F4F4;border-radius: 8px;">
                    <div style="width: 80%;height: 80%;margin-top:2%;margin-left: 10%;">
                        <div style="height: 50px;width: 50px;border-radius: 25px;background: -webkit-linear-gradient(#02F0C0, #40D479);position: relative;top: 15px;float: left;"></div>
                        <div style="height: 50px;width: 100px;position: relative;top: 15px;float: left;">
                            <p style="margin: 4px 16px;color: #40D479;font-weight: bold;font-size: 16px;">150</p>
                            <p style="margin: 4px 16px;font-size: 16px;">在线人数</p>
                        </div>
                    </div>
                </li>
                <li style="background:#F4F4F4;border-radius: 8px;">
                    <div style="width: 80%;height: 80%;margin-top:2%;margin-left: 10%;">
                        <div style="height: 50px;width: 50px;border-radius: 25px;background: -webkit-linear-gradient(#FCE477, #F29A1C);position: relative;top: 15px;float: left;"></div>
                        <div style="height: 50px;width: 100px;position: relative;top: 15px;float: left;">
                            <p style="margin: 4px 16px;color: #F29A1C;font-weight: bold;font-size: 16px;">156</p>
                            <p style="margin: 4px 16px;font-size: 16px;">档案数量</p>
                        </div>
                    </div>
                </li>
                <li style="background:#F4F4F4;border-radius: 8px;">
                    <div style="width: 80%;height: 80%;margin-top:2%;margin-left: 10%;">
                        <div style="height: 50px;width: 50px;border-radius: 25px;background: -webkit-linear-gradient(#FF70A9, #FF3030);position: relative;top: 15px;float: left;"></div>
                        <div style="height: 50px;width: 100px;position: relative;top: 15px;float: left;">
                            <p style="margin: 4px 16px;color: #FF3030;font-weight: bold;font-size: 16px;">56</p>
                            <p style="margin: 4px 16px;font-size: 16px;">待归档</p>
                        </div>
                    </div>
                </li>
                <li style="background:#F4F4F4;border-radius: 8px;">
                    <div style="width: 80%;height: 80%;margin-top:2%;margin-left: 10%;">
                        <div style="height: 50px;width: 50px;border-radius: 25px;background: -webkit-linear-gradient(#83EFFF, #6BB4FE);position: relative;top: 15px;float: left;"></div>
                        <div style="height: 50px;width: 100px;position: relative;top: 15px;float: left;">
                            <p style="margin: 4px 16px;color: #6BB4FE;font-weight: bold;font-size: 16px;">{{ aaaaa }}</p>
                            <p style="margin: 4px 16px;font-size: 16px;">档案利用</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="row" style="margin-top: 15px;">
        <div class="span24" style="width: 80%;float: left;height: 500px;">
            <div style="overflow: hidden;">
                <div style="height: 230px;width: 47%;float: left;background: #FFFFFF;border-radius: 5px;padding: 10px;">
                    <p style="padding: 5px 15px 0px 15px;">
                        <span style="color: #CCCCCC;font-weight: bold;">代办事项</span>
                        <a href="" style="float: right;">更多>></a>
                    </p>
                    <ul>
                        <li style="height: 85px;width: 88%;background: #F4F4F4;margin: 0 auto;margin-bottom: 11px;border-radius: 5px;padding: 5px 15px 0 15px;">
                            <p>借阅-批准</p>
                            <p>档案云系统操作手册</p>
                            <p>
                                <span>2019/2/10</span>
                                <span style="float: right;">李欢</span>
                            </p>
                        </li>
                        <li style="height: 85px;width: 88%;background: #F4F4F4;margin: 0 auto;border-radius: 5px;padding: 5px 15px 0 15px;">
                            <p>借阅-批准</p>
                            <p>档案云系统操作手册</p>
                            <p>
                                <span>2019/2/10</span>
                                <span style="float: right;">李欢</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <div style="height: 230px;width: 47%;float: right;background: #FFFFFF;border-radius: 5px;padding: 10px;">
                    <p style="padding: 5px 15px 0px 15px;">
                        <span style="color: #CCCCCC;font-weight: bold;">工作历史</span>
                        <a href="" style="float: right;">更多>></a>
                    </p>
                    <table style="width: 90%;margin: 0 auto;" class="workHistory">
                        <thead>
                        <tr style="border-bottom: 1px solid #F4F4F4;">
                            <th width="25%">标题</th>
                            <th width="20%">操作</th>
                            <th width="20%">状态</th>
                            <th width="20%">时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for object in object_list %}
                            {% if  forloop.counter <= 5 %}
                                <tr style="text-align: center;height: 30px;">
                                    <td>{{ object.label }}</td>
                                    <td>归档</td>
                                    <td>完成</td>
                                    <td>两小时前</td>
                                </tr>
                            {% endif %}

                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div style="height: 250px;margin-top: 15px;background: #FFFFFF;padding: 10px;border-radius: 5px;">
                <p>档案大数据</p>

            </div>
        </div>
        <div style="width: 18%;float: right;height: 500px;">
            <div style="height: 280px;background:#FFFFFF;padding: 10px;margin-bottom: 15px;border-radius: 5px;">
                <p style="text-align: center;color: #CCCCCC;font-weight: bold;">我的团队</p>
                <table style="width: 90%;margin: 0 auto;" class="myTeam">
                    <thead>
                    <tr>
                        <th width="50%">姓名</th>
                        <th width="50%">贡献文档</th>
                    </tr>
                    </thead>
                    <tbody style="margin-top: 10px;">
                    <tr style="text-align: center;height: 30px;">
                        <td>王明</td>
                        <td>150</td>
                    </tr>
                    <tr style="text-align: center;height: 30px;">
                        <td>王明</td>
                        <td>150</td>
                    </tr>
                    <tr style="text-align: center;height: 30px;">
                        <td>王明</td>
                        <td>150</td>
                    </tr>
                    <tr style="text-align: center;height: 30px;">
                        <td>王明</td>
                        <td>150</td>
                    </tr>
                    </tr>
                    <tr style="text-align: center;height: 30px;">
                        <td>王明</td>
                        <td>150</td>
                    </tr>
                    <tr style="text-align: center;height: 30px;">
                        <td>王明</td>
                        <td>150</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div style="text-align: center;background: #FFFFFF;height: 170px;padding-top: 15px;border-radius: 5px;"
                 class="annocement">
                <p style="border-bottom: 1px solid #F4F4F4;width: 80%;margin: 0 auto;margin-bottom: 8px;color: #CCCCCC;font-weight: bold;">
                    公告通知</p>
                <ul style="width: 80%;margin: 0 auto;text-align: left;">
                    <li style="height: 30px;">年度档案6900份</li>
                    <li style="height: 30px;">档案管理部门放假通知</li>
                    <li style="height: 30px;">福利发放通知</li>
                </ul>
            </div>
        </div>
    </div>

</div>
<!--<script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>-->
<!--<script type="text/javascript" src="../assets/js/bui-min.js"></script>-->
<!--<script type="text/javascript" src="../assets/js/config-min.js"></script>-->
<!--<script type="text/javascript">
  BUI.use('common/page');
</script>-->
<!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
<!--<script type="text/javascript" src="../assets/js/prettify.js"></script>-->
<!--<script type="text/javascript">
  $(function () {
    prettyPrint();
  });
</script>  -->

<body>
</html>
